import React,{Component} from 'react';
import $ from 'jquery';
class Button extends Component{
    move(event){
        $(event.currentTarget).find('.toL').stop(true).animate({left:0},200);
        $(event.currentTarget).find('.toR').stop(true).animate({left:0},200);
        $(event.currentTarget).find('.toT').stop(true).animate({bottom:0},200);
        $(event.currentTarget).find('.toB').stop(true).animate({bottom:0},200);
        
    }
    out(event){
        $(event.currentTarget).find('.toL').stop(true).animate({left:(this.props.width||200)+1},200);
        $(event.currentTarget).find('.toR').stop(true).animate({left:-((this.props.width||200)+1)},200);
        $(event.currentTarget).find('.toT').stop(true).animate({bottom:-((this.props.height||100)+1)},200);
        $(event.currentTarget).find('.toB').stop(true).animate({bottom:(this.props.height||100)+1},200);
    }
    render(){
        var style={
                p_a:{
                    position:'absolute',
                    width:this.props.width||'200',
                    height:this.props.height||'100',
                },
                p_r:{
                    position:'relative',
                    border:'1px solid rgba(255,255,255,0.2)',
                    width:this.props.width||'200',
                    height:this.props.height||'100',
                    color:'#fff',
                    textAlign:'center',
                    lineHeight:this.props.height+'px'||'100px',
                    fontSize:this.props.fontSize||'14px',
                    overflow:'hidden',
                    boxSizing:'content-box',
                    cursor:'pointer',
                    display:'inline-block'
                }
            }
        var toL={
            borderTop:'1px solid #fff',
            top:0,
            left:style.p_a.width+1
        }
        var toR={
            borderBottom:'1px solid #fff',
            bottom:0,
            left:-(style.p_a.width+1),
        }
        var toT={
            borderRight:'1px solid #fff',
            right:0,
            bottom:-(style.p_a.height+1),
        }
        var toB={
            borderLeft:'1px solid #fff',
            left:0,
            bottom:style.p_a.height+1,
        }
        Object.assign(toL,style.p_a)
        Object.assign(toR,style.p_a)
        Object.assign(toT,style.p_a)
        Object.assign(toB,style.p_a)
        return (
            <div className='btnName' style={style.p_r} onMouseOver={this.move.bind(this)} onMouseOut={this.out.bind(this)}>
                {this.props.font?this.props.font:'按钮'}
                <div className='toL' style={toL}></div>
                <div className='toR' style={toR}></div>
                <div className='toT' style={toT}></div>
                <div className='toB' style={toB}></div>
            </div>
        )
    }
}
export default Button;